<template>
  <div class="radius-container line-container">
    <div class="border-b pad-10 font-w font-16 top-border-bar">发布流程</div>
    <div class="pad-20">
      <el-steps direction="vertical" :active="active" v-if="taskStatuss">
        <div class="item-steps"><el-step class="detila-div-steps" :title="item.noteValue" v-for="item in taskStatuss" :key="item.noteValue"></el-step></div>
      </el-steps>
    </div>
  </div>
</template>

<style scoped>
  .line-container{
    min-height: 415px;
  }
  .detila-div-steps{
    height: 50px;
  }
  .item-steps{
    height: 88px;
  }
  .top-border-bar{
    border-top: #2d8cf0 5px solid;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
</style>

<script>
  import { getTaskInfoDict, getTaskInfo } from '@/api/project/taskInfo'
  export default {
    props: {
      //  任务id
      taskId: {
        type: String
      },
      taskType: {
        type: String
      }
    },
    data() {
      return {
        active: 1,
        taskStatuss: []
      }
    },
    // 过滤器
    filters: {
      statusFilter(status) {
        const statusMap = {
          1: 'success',
          2: 'danger'
        }
        return statusMap[status]
      }
    },
    // 初始化页面
    created() {
      this.initTaskInfo()
    },
    methods: {
      // active
      initTaskInfo() {
        getTaskInfoDict('TaskInfoDTO.taskTimelineStatus').then(response => {
          if (response.isError) return
          this.taskStatuss = response.data
        })
        if (this.taskId !== '0') {
          getTaskInfo(this.taskId).then(response => {
            if (response.isError) return
            this.taskStatus = response.data.taskStatus
            if (this.taskStatuss) {
              for (let i = 0; i < this.taskStatuss.length; i++) {
                if (this.taskStatuss[i].noteKey === this.taskStatus.toString()) {
                  this.active = i + 1
                }
              }
            }
          })
        } else {
          this.active = 1
        }
      }
    }
  }
</script>
